<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <el-form ref="searchForm" :model="searchForm" label-width="80px" :inline="true" size="small">
      <el-form-item label="部门名称">
        <el-input v-model="searchForm.deptName" placeholder="请输入部门名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
        <!--  v-if="hasPermission('sys:dept:add')" -->
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格列表 -->
    <!-- 
      default-expand-all属性：默认展开树形表格数据
      tree-props属性：树形表格配置选项
     -->
    <el-table :data="tableData" stripe style="width: 100%; margin-bottom: 20px" row-key="deptId" default-expand-all
      :tree-props="{ children: 'children' }">
      <el-table-column prop="deptName" label="部门名称"></el-table-column>
      <el-table-column prop="parentName" label="所属部门"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag>
            <span v-if="scope.row.status == 0">正常</span>
            <span v-if="scope.row.status == 1">停用</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="部门电话"></el-table-column>
      <el-table-column prop="address" label="部门地址"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button icon="el-icon-delete" type="danger" size="small" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加和编辑部门窗口 -->
    <system-dialog :title="deptDialog.title" :visible="deptDialog.visible" :width="deptDialog.width"
      :height="deptDialog.height" @onClose="onClose" @onConfirm="onConfirm">
      <div slot="content">
        <el-form :model="dept" ref="deptForm" :rules="rules" label-width="80px" :inline="true" size="small">
          <el-form-item label="所属部门" prop="parentName">
            <el-input v-model="dept.parentName" @click.native="selectDept()" :readonly="true"  placeholder="请输入所属部门" />
          </el-form-item>
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="dept.deptName" placeholder="请输入部门名称"/>
          </el-form-item>
          <el-form-item label="部门电话">
            <el-input v-model="dept.phone" placeholder="请输入部门电话"/>
          </el-form-item>
          <el-form-item label="部门地址">
            <el-input v-model="dept.address" placeholder="请输入部门地址"/>
          </el-form-item>
          <el-form-item label="序号">
            <el-input-number v-model="dept.orderNum" controls-position="right" :min="0" />
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>

    <!-- 选择所属部门窗口 -->
    <system-dialog :title="parentDialog.title" :visible="parentDialog.visible" :width="parentDialog.width"
      :height="parentDialog.height" @onClose="parentOnClose" @onConfirm="parentOnConfirm">
      <div slot="content">
        <el-tree ref="parentTree" :data="treeList" node-key="deptId" :props="defaultProps" :default-expand-all="true"
          :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick">
          <div class="customer-tree-node" slot-scope="{ node, data }">
            <span v-if="data.children.length === 0">
              <i class="el-icon-document"></i>
            </span>
            <span v-else @click="openBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s" />
              <svg-icon v-else icon-class="sub-s" />
            </span>
            <span style="margin-left: 5px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </system-dialog>

  </div>
</template>

<script>
import deptApi from '@/api/system/dept'
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';

export default {
  name: 'dept',
  components: { SystemDialog },
  data() {
    return {
      //搜索条件
      searchForm: {},
      //表格数据列表
      tableData: [],
      //部门窗口属性
      deptDialog: {
        title: "",
        //是否显示
        visible: false,
        width: 560,
        height: 170,
      },
      //部门对象
      dept: {},
      //表单验证规则
      rules: {
        deptName: [{
          required: true, trigger: "blur", message: "请输入部门称"
        }],
        parentName: [{
          required: true, trigger: "change", message: "请选择所属部门"
        }]
      },

      //选择所属部门属性
      parentDialog: {
        title: "",
        visible: false,
        width: 300,
        height: 400,
      },
      //树形菜单列表
      treeList: [],
      defaultProps: {
        children: "children",
        label: "deptName",
      },

    }
  },
  created() {
    this.search();
  },
  methods: {
    //查询部门列表
    async search() {
      let res = await deptApi.getDeptList(this.searchForm);
      if (res.success) {
        this.tableData = res.data;
      }
    },
    //重置
    reset() {
      this.searchForm = {};
      this.search();
    },
    //打开添加部门窗口
    openAddWindow() {
      //清空表单数据
      this.$resetForm("deptForm", this.dept);
      //设置窗口标题
      this.deptDialog.title = "新增部门";
      //显示添加部门窗口
      this.deptDialog.visible = true;
    },
    //弹窗取消事件
    onClose() {
      this.deptDialog.visible = false;
    },
    //弹窗确认事件
    onConfirm() {
      //表单验证
      this.$refs.deptForm.validate(async (valid) => {
        //如果验证通过
        if (valid) {
          let res = null;
          if (this.dept.deptId == undefined) {
            res = await deptApi.addDept(this.dept);
          } else {
            res = await deptApi.updateDept(this.dept);
          }
          if (res.success) {
            this.$message.success(res.message);
            this.search()
            //关闭窗口
            this.deptDialog.visible = false;
          } else {
            this.$message.error(res.message);
            this.deptDialog.visible = false;
          }
        }
      });
    },
    //选择所属部门取消事件
    parentOnClose() {
      this.parentDialog.visible = false;
    },
    //选择所属部门确认事件
    parentOnConfirm() {
      this.parentDialog.visible = false;
    },
    //选择所属部门
    async selectDept() {
      this.parentDialog.visible = true;
      this.parentDialog.title = "选择所属部门";
      //查询部门列表
      let res = await deptApi.getParentTreeList();
      if (res.success) {
        this.treeList = res.data;
      }
    },
    //树节点点击事件
    handleNodeClick(data) {
      //当点击树节点时，赋予选中的值
      this.dept.parentId = data.deptId;
      this.dept.parentName = data.deptName;
    },
    //点击树节点+-号折叠展开事件
    openBtn(data) {
      //修改折叠展开状态
      data.open = !data.open;
      this.$refs.parentTree.store.nodesMap[data.deptId].expanded = !data.open;
    },
    //修改按钮
    handleEdit(row) {
      //数据回显
      this.dept = row;
      //设置窗口标题
      this.deptDialog.title = "编辑部门";
      //显示编辑部门窗口
      this.deptDialog.visible = true;
    },
    //删除按钮
    async handleDelete(row) {
      //查询部门下是否存在子部门或用户
      let result = await deptApi.getCheckDept({ deptId: row.deptId });
      //判断是否可以删除
      if (!result.success) {
        //提示不能删除
        this.$message.warning(result.message);
      } else {
        //确认是否删除
        let confirm = await this.$myconfirm("确定要删除该数据吗?");
        if (confirm) {
          //发送删除请求
          let res = await deptApi.deleteDept({ deptId: row.deptId });
          //判断是否成功
          if (res.success) {
            //成功提示
            this.$message.success(res.message);
            //刷新
            this.search();
          } else {
            //失败提示
            this.$message.error(res.message);
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>